<template>
<div id="login">
    <el-form :model="ruleForm" :rules="rules" ref="ruleFormref" label-width="100px" >
        <h3 class="login_title">系统登入</h3>
  <el-form-item label="用户名" prop="username">
    <el-input v-model="ruleForm.username" placeholder="请输入账号"  clearable></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码"  clearable></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submit()">登入</el-button>
  </el-form-item>
  </el-form>
</div>
</template>

<script>
import { mapMutations } from "vuex"
export default {
    data() {
        return {
            //登入数据
            ruleForm: {
                username: '',
                password: ''
            },
            //验证
            rules: {
                username: [{ required: true, message: "请输入用户名", trigger: 'blur' }],
                password: [{ required: true, message: "请输入密码", trigger: 'blur' }]
            }
        }
    },
    methods: {
        //点击登入，立即登入
        ...mapMutations('my-tab', ['setmenu', 'addmenu']),
        async submit() {
            this.$refs.ruleFormref.validate(async (bool) => {
                if (!bool) return
                let { data } = await this.$http.post("/login", this.ruleForm)
                console.log(data)

                if (data.code !== 20000) {
                    return this.$message.error("登入失败")
                } else {
                    this.setmenu(data.data.menu)
                    this.addmenu(this.$router)
                    window.sessionStorage.setItem("token", data.data.token)
                    this.$router.push("/home")
                }
            })


        }
    }
}
</script>
++
<style lang="less" scoped>
#login {
    width: 350px;
    border: 1px solid #eaeaea;
    margin: 180px auto;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0px 0px 25px #cac6c6;


    .login_title {
        text-align: center;
        margin: 10px 0px
    }
}
</style>